<template>
  <div class="card-box">
    <div class="card-title">
      <span>联系人信息</span>
      <el-col :span="2" v-if="showbutton">
        <el-button type="text" @click="addRow">新增</el-button>|
        <el-button type="text" @click="delRow">删除</el-button>
      </el-col>
    </div>
    <div class="margin-box">
      <el-form :rules="form.rules" :model="form" status-icon ref="form">
        <el-table :data="form.editPersons" ref="addTable" align="center">
          <el-table-column type="selection" />
          <el-table-column width="60" label="序号" type="index" />
          <el-table-column label="姓名">
            <template slot-scope="scope">
              <el-form-item :prop="'editPersons.' + scope.$index + '.name'" :rules="form.rules.name">
                <el-input class="ipt" v-model="scope.row.name" maxlength="24" placeholder="请输入姓名，不可为空，最长为24位"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="手机号">
            <template slot-scope="scope">
              <el-form-item :prop="'editPersons.' + scope.$index + '.phone'" :rules="form.rules.phone">
                <el-input class="ipt" v-model="scope.row.phone" maxlength="20" placeholder="请输入手机号码或者固定电话，不可为空"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              <el-form-item>
                <el-input class="ipt" v-model="scope.row.remarks" maxlength="200" placeholder="备注可为空"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  fetchList,
  getByClientLesseeId
} from '@/views/wy-lessor/landlord/api/lessorlinkinfo'
import {
  validatePhoneTwo,
  validateEmail,
  validateIdNo
} from '~/utils/validate'
export default {
  name: "person-info",
  props: {
    pid: {
      type: String
    },
    showbutton: {
      type: Boolean,
      default: true
    },
    // 是否新增
    isAdd: {
      type: Boolean,
      default: true,
    }
  },
  data () {
    return {

      lessorId: '',
      //校验+:
      form: {
        editPersons: [],
        rules: {
          name: [{
            required: true,
            message: "名字不能为空",
            trigger: ['change']
          },],
          phone: [{
            required: true,
            message: "电话号码不能为空",
            trigger: ['change']
          },
          {
            validator: validatePhoneTwo,
            trigger: "change"
          },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[23456789]\d{9}))$/,
            message: '请输入正确的电话号码或者固话号码(0754-XXXXXXXX)'
          },
          ],
          email: [{
            required: true,
            message: '电子邮箱不能为空',
            trigger: ['change']
          },
          {
            validator: validateEmail,
            trigger: "change"
          },
          ]
        },
      }
    }
  },
  mounted () {
    this.lessorId = this.pid;
    // 只有存在pid且是编辑场景才请求联系人信息数据
    this.pid && !this.isAdd && this.queryList();
  },
  methods: {
    // 添加行
    addRow () {
      this.$set(this.form.editPersons, this.form.editPersons.length, {
        index: this.form.editPersons.length,
        name: '',
        email: '',
        phone: '',
        remarks: '',
      })
      // this.form.editPersons.push({
      //     index: this.form.editPersons.length,
      //     name: '',
      //     email:'',
      //     phone: '',
      //     remarks: '',
      // })
    },
    // 删除行
    delRow () {
      if (this.form.editPersons.length > 0) {
        if (this.$refs.addTable != undefined || this.$refs.addTable != null) {
          let addTables = this.$refs.addTable.selection.map(item => item.index)
          let editPersons = this.form.editPersons.filter(item => !addTables.includes(item.index))
          this.form.editPersons = editPersons.map((item, index) => {
            item.index = index
            return item
          })
        }
      }
    },
    // 获取数据
    queryList (lessorId = this.pid) {
      getByClientLesseeId({
        lessorId
      }).then(respdata => {
        let data = respdata.data.data.map((item, index) => ({
          ...item,
          index
        }))
        if (data && data.length) {
          this.form.editPersons = data
          //this.form.editPersons = this.form.editPersons.reverse();
        }
      })
    }
  }
}

</script>
<style scoped lang="scss">
.ipt {
  margin-top: 18px;
}
</style>
